<!-- dall3 -->
<template>
  <div class="prompt">
    <div class="text-16px color-#8A8A8A">视频描述</div>
    <div class="text-12px color-#8A8A8A"
      >建议使用“形容词 + 动词 + 风格”的格式，使用“，”隔开</div
    >
    <el-input
      v-model="prompt"
      maxlength="1024"
      :rows="5"
      class="w-100% mt-6px video-ai-input"
      input-style="border-radius: 7px;"
      placeholder="例如：童话里的小屋应该是什么样子？"
      show-word-limit
      type="textarea"
    />
  </div>
  <div class="hot-words">
    <div>
      <div class="text-16px color-#8A8A8A">随机热词</div>
    </div>
    <el-space wrap class="word-list">
      <el-button
        round
        class="m-0 !text-16px px-20px py-3px !fw-400"
        :class="[
          selectHotWord === hotWord ? '' : '!bg-[var(--el-color-primary-light-9)] !border-0'
        ]"
        :type="selectHotWord === hotWord ? 'primary' : 'default'"
        v-for="hotWord in VideoHotWords"
        :key="hotWord"
        @click="handleHotWordClick(hotWord)"
      >
        {{ hotWord }}
      </el-button>
    </el-space>
  </div>
  <div class="group-item">
    <div>
      <div class="text-16px color-#8A8A8A">分辨率</div>
    </div>
    <el-space wrap class="group-item-body">
      <el-select v-model="resolutionLevel" placeholder="选择分辨率" style="width: 100px" class="video-ai-input">
        <el-option
          v-for="item in resolutionLevelList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-space>
  </div>
  <div class="group-item">
    <div>
      <div class="text-16px color-#8A8A8A">视频比例</div>
    </div>
    <el-space wrap class="group-item-body">
      <!-- <el-select v-model="videoRatio" placeholder="选择视频比例" style="width: 240px">
        <el-option
          v-for="item in ratioList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select> -->

      <div class="flex gap-8px flex-wrap">
        <el-button
          v-for="item in ratioList"
          :key="item.value"
          :class="['ratio-btn', videoRatio === item.value ? 'ratio-btn-active' : '']"
          class="!w-72px !h-72px !m-0 !p-0"
          @click="videoRatio = item.value"
        >
          <div class="flex flex-col items-center justify-between w-72px h-72px overflow-hidden">
            <div class="flex-1 pt-10px flex overflow-hidden">
              <div
                class="bg-#D4D4D4 rounded-4px"
                :class="[videoRatio === item.value && '!bg-#BB9EFF']"
                :style="{
                  width: `${parseInt(item.value.split(':')[0]) * (item?.scale || 1)}px`,
                  height: `${parseInt(item.value.split(':')[1]) * (item?.scale || 1)}px`
                }"
              ></div>
            </div>

            <div class="h-20px flex-shrink-0 text-16px text-#424242 mt-2px">{{ item.label }}</div>
          </div>
        </el-button>
      </div>
    </el-space>
  </div>
  <div class="group-item">
    <div>
      <div class="text-16px color-#8A8A8A">视频尺寸</div>
    </div>
    <el-space wrap class="group-item-body">
      <el-text class="mx-1">{{ videoSize }}</el-text>
    </el-space>
  </div>
  <div class="group-item">
    <div>
      <div class="text-16px color-#8A8A8A">视频时长</div>
    </div>
    <el-space wrap class="group-item-body">
      <el-radio-group v-model="videoDuration">
        <el-radio-button :label="5">5秒</el-radio-button>
        <el-radio-button :label="10">10秒</el-radio-button>
      </el-radio-group>
    </el-space>
  </div>

  <div class="btns">
    <el-button
      class="w-120px h-36px !rounded-6px text-16px create-button"
      type="primary"
      size="large"
      round
      :loading="drawIn"
      :disabled="prompt.length === 0"
      @click="handleGenerateVideo"
    >
      {{ drawIn ? '生成中' : '生成内容' }}
    </el-button>
  </div>
</template>
<script setup lang="ts">
import { VideoApi, aiVideoGenerateReqVo, VideoVO } from '@/api/ai/video'
import { AiPlatformEnum, VideoHotWords, OtherPlatformEnum } from '@/views/ai/utils/constants'
import { ModelVO } from '@/api/ai/model/model'

const message = useMessage() // 消息弹窗

// 接收父组件传入的模型列表
const props = defineProps({
  models: {
    type: Array<ModelVO>,
    default: () => [] as ModelVO[]
  }
})
const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits

// 定义属性
const drawIn = ref<boolean>(false) // 生成中
const selectHotWord = ref<string>('') // 选中的热词
const prompt = ref<string>('') // 提示词
const otherPlatform = ref<string>(AiPlatformEnum.DouBao) // 平台
const platformModels = ref<ModelVO[]>([]) // 模型列表
const modelId = ref<number>() // 选中的模型
const generateMode = ref(1) //生成模式

// 分辨率档位
const resolutionLevel = ref('480p')
const resolutionLevelList = [
  { value: '480p', label: '480' },
  { value: '720p', label: '720' },
  { value: '1080p', label: '1080' }
]
// 比例
const videoRatio = ref('16:9')
const ratioList = [
  { value: '16:9', label: '16:9', scale: 3.2 },
  { value: '4:3', label: '4:3', scale: 10 },
  { value: '1:1', label: '1:1', scale: 38 },
  { value: '3:4', label: '3:4', scale: 10 },
  { value: '9:16', label: '9:16', scale: 2.4 },
  { value: '21:9', label: '21:9', scale: 2.7 }
]

// 时长
const videoDuration = ref(5)

// 档位与比例对应的分辨率
const resolutionMap: Record<string, Record<string, string>> = {
  '480p': {
    '16:9': '864x480',
    '4:3': '736x544',
    '1:1': '640x640',
    '3:4': '544x736',
    '9:16': '480x864',
    '21:9': '960x416'
  },
  '720p': {
    '16:9': '1248x704',
    '4:3': '1120x832',
    '1:1': '960x960',
    '3:4': '832x1120',
    '9:16': '704x1248',
    '21:9': '1504x640'
  },
  '1080p': {
    '16:9': '1920x1088',
    '4:3': '1664x1248',
    '1:1': '1440x1440',
    '3:4': '1248x1664',
    '9:16': '1088x1920',
    '21:9': '2176x928'
  }
}

const videoSize = ref('864x480')

watch(
  [resolutionLevel, videoRatio],
  ([newLevel, newRatio]) => {
    videoSize.value = resolutionMap[newLevel][newRatio] || ''
  },
  { immediate: true }
)

/** 选择热词 */
const handleHotWordClick = async (hotWord: string) => {
  // 情况一：取消选中
  if (selectHotWord.value == hotWord) {
    selectHotWord.value = ''
    return
  }

  // 情况二：选中
  selectHotWord.value = hotWord // 选中
  prompt.value = hotWord // 替换提示词
}

/** 视频生成 */
const handleGenerateVideo = async () => {
  // 二次确认
  await message.confirm(`确认生成内容?`)
  try {
    // 加载中
    drawIn.value = true
    // 回调
    emits('onDrawStart', otherPlatform.value)
    // 发送请求
    const form = {
      modelId: modelId.value, // 模型
      prompt: prompt.value, // 提示词
      // generateMode: generateMode.value,
      size: resolutionLevel.value,
      ratio: videoRatio.value, // 比例
      duration: videoDuration.value // 新增时长参数
      // size: `${width.value}x${height.value}`
    } as unknown as aiVideoGenerateReqVo
    await VideoApi.generateVideo(form)
  } finally {
    // 回调
    emits('onDrawComplete', otherPlatform.value)
    // 加载结束
    drawIn.value = false
  }
}

/** 填充值 */
const settingValues = async (detail: VideoVO) => {
  prompt.value = detail.prompt
}

/** 平台切换 */
const handlerPlatformChange = async (platform: string) => {
  console.log(props.models, platform, '---props.models')

  // 根据选择的平台筛选模型
  platformModels.value = props.models.filter((item: ModelVO) => item.platform === platform)
  console.log(platformModels.value, '---platformModels.value')

  // 切换平台，默认选择一个模型
  if (platformModels.value.length > 0) {
    modelId.value = platformModels.value[0].id // 使用 model 属性作为值
  } else {
    modelId.value = undefined
  }
}

/** 监听 models 变化 */
watch(
  () => props.models,
  () => {
    handlerPlatformChange(otherPlatform.value)
  },
  { immediate: true, deep: true }
)
/** 暴露组件方法 */
defineExpose({ settingValues })
</script>
<style scoped lang="scss">
.hot-words {
  display: flex;
  flex-direction: column;
  margin-top: 10px;

  .word-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: start;
    margin-top: 10px;

    .btn {
      margin: 0;
    }
  }
}

// 模型
.group-item {
  margin-top: 10px;

  .group-item-body {
    width: 100%;
    margin-top: 10px;
  }
}

.btns {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.ratio-btn {
  border: 1px solid #c2c2c2;
  border-radius: 6px;
  transition:
    border,
    background-image 0.3s ease-in-out;
}

.ratio-btn-active {
  overflow: hidden;
  background-image: linear-gradient(to right, #fff, #fff),
    linear-gradient(90deg, #bc9eff 0%, #8b9bff 100%);
  border: 1px solid transparent;
  border-radius: 6px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

.create-button {
  background: linear-gradient(90deg, #8a9bff 0%, #bc9eff 100%);
  border: 0 !important;
  border-radius: 6px;
}

.video-ai-input {
  overflow: hidden;
  background-image: linear-gradient(to right, #fff, #fff),
    linear-gradient(90deg, #bc9eff 0%, #8b9bff 100%);
  border: 1px solid transparent;
  border-radius: 6px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;

  :deep() {
    .el-input__count {
      font-size: 12px;
      color: #8a8a8a;
    }

    .el-textarea__inner {
      &::placeholder {
        font-size: 14px;
        color: #8a8a8a;
      }
    }
  }
}
</style>
